<template>
  <div ww3 auto>
    <select-nav ref="nav" :categoryIds="categoryIds"></select-nav>
    <div class="query-content">
      <div class="left">
        <div class="sort-list">
          <span class="title">价格/</span>
          <span>全部</span>
          <span>20￥以下</span>
          <span>20-50￥</span>
          <span>大于50￥</span>
        </div>
        <div class="sort-list">
          <span class="title">分辨率/</span>
          <!-- <span>全部</span>
          <span>sd标清</span>
          <span>hd高清</span>
          <span>2k</span>
          <span>4k/6k</span> -->
          <span>全部</span>
          <span>≥720P</span>
          <span>>1080P</span>
          <span>>2K</span>
          <span>>4K</span>
        </div>
        <div class="sort-list">
          <el-checkbox-group v-model="radio">
            <el-checkbox :label="3">透明通道</el-checkbox>
            <el-checkbox :label="6">无限循环</el-checkbox>
            <el-checkbox :label="9">肖像权</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="sort-list">
          <span class="title">时长/</span>
          <span>全部</span>
          <span>60秒以下</span>
          <span>1-2分钟</span>
          <span>2分钟以上</span>
        </div>
        <div class="sort-list">
          <span class="title">帧率/</span>
          <span>全部</span>
          <span>23.98</span>
          <span>24</span>
          <span>25</span>
          <span>29.97</span>
          <span>30</span>
          <span>50</span>
          <span>59.94</span>
          <span>60</span>
        </div>
        <div class="sort-list">
          <el-checkbox-group v-model="radio2">
            <el-checkbox :label="3">个人创作</el-checkbox>
            <el-checkbox :label="6">企业创作</el-checkbox>
            <!-- <el-checkbox :label="9">官方创作</el-checkbox> -->
          </el-checkbox-group>
        </div>
      </div>
      <div class="rigih">
        <div class="sort-list">
          <span style="display: inline-block; width: 60px;">清除筛选</span>
        </div>
        <el-dropdown trigger="click">
          <span class="sort-box">
            排序<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>默认排序</el-dropdown-item>
            <el-dropdown-item>最多下载</el-dropdown-item>
            <el-dropdown-item>最新上传</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!-- <div class="result-content">
      <div class="result-item"
       v-for="(item, index) in videoList" :key="index" 
       @mouseenter="itemEnter" @mouseleave="itemLeave" @click="goDetail(index)">
        <div class="res-i-img">
          <img :src="fileUrl + item.filesImg1" alt="">
        </div>
        <div class="res-i-img res-i-img2">
          <img :src="fileUrl + item.filesImg1" alt="">
          <img :src="fileUrl + item.filesImg1" alt="">
          <img :src="fileUrl + item.filesImg1" alt="">
          <img :src="fileUrl + item.filesImg1" alt="">
        </div>
        <div class="item-msg">
          <span class="down">1000下载</span>
          <span class="time">00:24</span>
        </div>
        <video class="item-mediu" id="itemVideo" v-show="showVideo" :src="imgVideo"></video>
      </div>
    </div> -->

    <div class="pos-b banner-wap1 ww1">
        <div class="auto pic-list-wap">
            <div class="list-wap  material-wap-pub">
                <dl v-for="(item,index) in videoList" :key="index">
                    <dt  @click="goDetail(item.videoId)">
                        <div class="list-top pos-b ww1">
                            <p class="flex" space-be="">
                                <span>{{item.fileName}}</span>
                                <i style="margin-right: 15px;">{{item.individualPrice}}￥</i>
                            </p>
                            {{item.resolutionRatio}}
                        </div>
                        <div class="list-center">

                            <img :src="fileUrl + item.filesImg1" alt="" >

                            <video  autoplay width="100%" :src="fileUrl + item.fileUrl" :key="item.fileUrl" muted class="hide" preload="auto" loop="loop">
                            </video>
                        </div>
                        <div class="img-wrapper">
                          <img :src="fileUrl + item.filesImg1" alt="">
                          <img :src="fileUrl + item.filesImg1" alt="">
                          <img :src="fileUrl + item.filesImg1" alt="">
                          <img :src="fileUrl + item.filesImg1" alt="">
                        </div>
                        <div class="material-info pos-b ww1">
                            <div class="left">{{item.downloadRate }}下载</div>
                            <div class="fz-r" style="margin-right: 15px;">{{$formatDuring(item.fileSometimes)}}</div>
                        </div>
                    </dt>
                </dl>
            </div>
        </div>
    </div>

    <div flex ww1 style="justify-content: center; margin-top: 50px;">
      <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="currentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import $http from "@/api/info/videoUpload"
import SelectNav from './components/SelectNav.vue'
import $ from 'jquery'
export default {
  components: {
    SelectNav
  },
  data() {
    return {
      pageSize: 8,
      pageNum: 1,
      total: 8,
      fileUrl: this.$url.fileUrl,
      keywords: '',
      radio: [],
      radio2: [],
      imgHead: 'https://pic.vjshi.com/2021-06-15/9e32b8bb560f9839d691fc98d12a23d2/online/99df205dbc926fc3b2894cb668cb097d.jpg?x-oss-process=style/resize_w_285',
      imgBottom: 'https://pic.vjshi.com/2021-06-15/9e32b8bb560f9839d691fc98d12a23d2/online/079271b6c945d80af65a2e096941d897.jpg?x-oss-process=style/resize_w_285_crop_h_428',
      imgVideo: 'https://lmp4.vjshi.com/2021-05-31/23ba8feb401862150cde627c15bf03ab.mp4?v=nizhuanrennizhuan',
      showVideo: false,
      itemVideo: null,
      state: '',
      videoList: [],
      categoryIds: ''
    }
  },
  mounted() {
    this.initNavstate();
    window.initNavstate = this.initNavstate;
    window.getVideoTitle = this.getVideoTitle;
  },
  methods: {
    navClick(navId) {
      this.categoryIds = navId;
      this.getVideoList();
    },
    /**
     * 分页
     */
    currentChange(val) {
      this.pageNum = val;
      this.getVideoList();
    },
    itemEnter() {
      // this.showVideo = true;
      // 鼠标进入某一项，对其对应的短视频进行播放
      // this.itemVideo.play()
    },
    itemLeave() {
      // this.showVideo = false
    },
    // 详情跳转
    goDetail(id){
      this.$router.push(`/videoCenter/watch/${id}`)
    },
    /**
     * 搜索
     */
    getVideoTitle(data) {
      this.state = data;
      this.getVideoList();
    },
    /**
     * initnav
     */
    initNavstate() {
        console.log("搜索参数", this.$route.params.id);
        let id = this.$route.params.id;
        if(id) {
          this.categoryIds = id;
        }
        this.$refs.nav.init(this.categoryIds);
        this.getVideoList();
    },
    /**
     * 获取视频列表
     */
    getVideoList() {
        let data = {
            //"userId": sessionStorage.getItem('userId'),
            //"aisleAuthorization": "",
            "categoryIds": this.categoryIds,
            "title": this.state
        };
        let page = {
            pageSize: this.pageSize,
            pageNum: this.pageNum,
        }
        $http.getVideoList(page, data).then((res) => {
            console.log(res);
            this.videoList = res.rows;
            this.total = res.total;
            setTimeout(() => {
                $('.material-wap dl, .list-wap dl').each(function () {
                    $(this).hover(function () {
                        $(this).find('dt video').removeClass('hide')
                        $(this).find('.list-center img').addClass('hide')
                    },function () {
                        $(this).find('dt video').addClass('hide')
                        $(this).find('.list-center img').removeClass('hide')
                    })
                })
            }, 1000)
        })
    },
  }
}
</script>

<style scoped>
.material-wap-pub dl .img-wrapper {
  font-size: 0;
}
.material-wap-pub dl .img-wrapper img {
  width: 50%;
  height: 50%;
}
.list-center {
  width: 100%;
  height: 160px;
}
::v-deep .el-radio {
  margin-right: 12px;
}
.sort-box{
  padding: 4px 10px;
  border: 1px solid #afaeae;
}
.query-content{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.left{
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}
.sort-list{
  font-size: var(--content);
  color: var(--color-black);
  width: 33%;
  margin-top: 20px;
}
.sort-list .title{
  color: #555;
  margin: 20px 0px;
  cursor: initial;
}
.sort-list span {
  margin: 20px 6px;
  cursor: pointer;
}
.sort-list span:first-child:hover {
  color: #555;
}
.sort-list span:hover {
  color: var(--green);
}
/* 视频列表部分 */
.result-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  cursor: pointer;
  margin-top: 16px;
}
.result-content .result-item{
  width: 285px;
  height: 320px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 14px;
  position: relative;
}
.result-content .result-item .res-i-img{
  width: 285px;
  height: 160px;
  overflow: hidden;
}
.result-item .res-i-img img {
  width: 100%;
  vertical-align: middle;
}
.result-item .res-i-img2 img {
  width: 50%;
  height: 50%;
  vertical-align: middle;
}
.result-item .item-msg{
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 285px;
  box-sizing: border-box;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--small);
  color: #f4f3f3;
}
.item-mediu{
  position: absolute;
  top: 0;
  left: 0;
  width: 285px;
}



.pos-b.banner-wap1.ww1 {
    position: relative;
    top: 50px;
    width: auto;
}



.nav-third{
    top:100%; background: var(--chilid-nav-bg);
    left: 0;
    padding: 1% 0; display: none;
    z-index: 1;
}
.nav-third-wap dl{
    display: none;
}
.nav-third-wap dt{}

.arrow:after {
    content: "";
    display: inline-block;
    border: 10px solid transparent;
    border-top-width: 0;
    border-bottom-color: #fff;
}
.arrow{
    -webkit-transition: all .3s;
    transition: all .3s;
    bottom: -15px;
    width: 10px;

}

.nav-third-wap a:hover, .red a:hover, .red-cont:hover, .c-red{
   /* background: #f6f9fc;*/
    color: var(--nav-hover-red);
}
.nav-third-wap a{
    color: var(--color-black); padding: 0 2%; margin: 0;
}


.nav-third-wap{
    width: 95%;
}

[space-be]{
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

[space-arrow]{
    justify-content: space-around;
    -webkit-justify-content: space-around;
}

.head-search{
    border: 1px solid #6f6f6f;
    background: #f5f5f5;
    border-right: none;
    height: 38px; line-height: 38px;
    flex: 1;
    margin-right: 12px;

}
.head-search input{
    border: none;
    outline: none;
    background: none;
    flex: 1;
    color: var(--nav-color);
    text-indent: 2%;
}
[transition]{
    -webkit-transition: all .5s;
    transition: all .5s;
}
.tag-box{

}
.tag-box dt{
    margin-right: 20px;
}
.tag-box dd{
    background: var(--search-btn-color);
    padding: 0 12px;
    border: 1px solid  var(--search-btn-color);
}
.tag-wap{
    color: var(--color-black);
    font-size: var(--chilid-nav-bg);
    padding: 0 10px;
    text-transform: uppercase;
}
.shop-num{
    background:red;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    line-height: 20px;
    text-align: center;
    font-size: 11px;
    color: #fff;
    left: 15px;
    top: 8px;
}
.shop-num.no-num{
    background: var(--grey);
}

/*缩略图*/
.material-wap-pub{
    display: flex;
    display: -ms-flex ;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    width:1200px;
    margin: auto;
}


.material-wap-pub dl{
    -webkit-transform: translateY(0);
    -webkit-transition: all .5s;
    transition: all .5s;
    flex: 0 0 25%;
    width: 25%;
    margin-bottom: 15px;
    cursor: pointer;

}
.material-wap-pub dt, .material-wap-pub dd{
    width: 285px;
    height: 160px;
}
.material-wap-pub dl:hover{
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
}

.material-wap-pub dl img{
    width: 100%; height: 100%;
    opacity: .9;
    object-fit: fill;
}
.material-wap-pub a{
    display: block;width: 100%;overflow: hidden;
    height: 100%;
}
.flex{
    display: flex;
    display: -ms-flex ;
}
.align-c{
    -webkit-align-items: center; align-items: center;
}

.raduis:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px
;
}
.swiper-wrapper{
    overflow: hidden;
}

.hide{
    display: none;
}
.green{
    background-color: #02d4b1; border-radius: 4px;
}

.nav-left .pos-b{
    height: 2px;
    width: auto;
    background: #fff;
    top: 95%;
    left: 0;
    transition: all .3s;
    -webkit-transition: all .3s;
}
.left-wap1.nav-left   .pos-b{
    background: #010200;
}
.links a{
    padding-top: 2%;
    color: var(--color-black);
    font-size: var(--content);
    margin-right: 12px;
    padding-bottom: 6%;
}

.material-wap dl, .list-wap dl{
    overflow: hidden;
    font-size: var(--small);
}

.list-wap dl{
    height: 320px;

}
.list-wap video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list-top, .material-info{
    padding: 0 2%;

}
.list-top p span{
    width: 80%;
    flex: 0 0 80%;
}

.material-wap-pub dl:hover  .list-top{
    transform: translateY(6px);
    -webkit-transition: all .3s;
    transition: all .3s;
    z-index: 1;
}

.list-top{
    top:0px; left: 0;transform: translateY(-100%);
    z-index: -1; line-height:20px;
}
.list-wap dd{
    bottom: 12px;
}

.list-top, .material-info{
    text-shadow: 0px 2px 2px rgb(56 50 50 / 70%);
}

.list-top , .list-wap dd a, .material-info{
    color: var(--small-color);
}

.list-top p{
    align-items: center;
}

.list-wap dd a{

    display: flex;
    display: -moz-flex;
    display: -ms-flex;

}
.material-wap dl a {
    height: 160px;
}
.list-wap dl a  {
    height: 160px;
}
.material-info{
    bottom: 4px;
    display: flex;
    justify-content: space-between;
}


</style>
